<template>
  <div class="bottom">
    <div class="bottom-top">
      <div class="item">
        <img src="../../assets/image/bottom/first.png" alt="" />
        <div class="describe">
          <div class="describe-title">轻松开网店</div>
          <div class="describe-msg">无需积压商品库存</div>
        </div>
      </div>
      <div class="item">
        <img src="../../assets/image/bottom/second.png" alt="" />
        <div class="describe">
          <div class="describe-title">商品一件代发</div>
          <div class="describe-msg">百万库存 多平台面单发货</div>
        </div>
      </div>
      <div class="item">
        <img src="../../assets/image/bottom/third.png" alt="" />
        <div class="describe">
          <div class="describe-title">数千家供应商</div>
          <div class="describe-msg">汇集优质批发商 商品无忧</div>
        </div>
      </div>
      <div class="item">
        <img src="../../assets/image/bottom/fourth.png" alt="" />
        <div class="describe">
          <div class="describe-title">商品退换保障</div>
          <div class="describe-msg">商品15天无条件退换货</div>
        </div>
      </div>
    </div>

    <div class="bottom-medium">
      <div class="bottom-medium-item" @click="topath('/HelpCenter', 2)">
        关于我们
      </div>
      <div class="bottom-medium-item" @click="topath('/HelpCenter', 0)">
        联系我们
      </div>
      <div class="bottom-medium-item" @click="topath('/HelpCenter', 1)">
        帮助中心
      </div>
      <div class="bottom-medium-item">精品货源</div>
      <div class="bottom-medium-item" @click="topath('/enroll', 'second')">
        商家入驻
      </div>
      <div
        class="bottom-medium-item"
        @click="openUrl('http://wjtzw.cn/oss/yingyezhizhao.png')"
      >
        营业执照
      </div>
    </div>

    <div class="bottom-link">
      <div class="bottom-link-item">咨询电话：0556-8858852</div>
      <div class="bottom-link-item" style="color: #e8e8e8">|</div>
      <img
        style="cursor: pointer"
        @click="dialogVisible = true"
        src="../../assets/image/bottom/wx.png"
        alt=""
      />
    </div>

    <div class="bottom-beian">
      <div>Copyright © 2010-2023 望江童装网wjtzw.cn 版权所有</div>
      <div
        style="cursor: pointer"
        @click="openUrl('https://beian.miit.gov.cn/')"
      >
        皖ICP备2023015209号-1
      </div>
      <div>增值电信业务经营许可证：皖B2-20230506</div>
      <div style="display: flex; align-items: center;cursor: pointer"   @click="openUrl('https://beian.mps.gov.cn/#/query/webSearch?code=34082702341001')">
        <img
          src="../../assets//image/bottom/guohui.png"
          alt=""
        />皖公网安备34082702341001号
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">微信交谈</div>
        <div class="chahao" @click="dialogVisible = false"></div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 20px 40px" class="textBox">
        <div class="tishi">
          <i class="iconfont icon-weixin"></i>
          扫描下方二维码进行联系
        </div>
        <img src="@/assets/image/help/icon5.png" alt="" />
      </div>
      <div class="btnBox">
        <el-button type="primary" @click="dialogVisible = false" class="huiBtn">
          取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  created() {},
  methods: {
    //预览图片
    openUrl(url) {
      window.open(url);
    },
    //页面跳转
    topath(url, index) {
      this.$router.push({
        path: url,
        query: {
          index: index,
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.bottom {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  &-top {
    width: 14rem;
    height: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item {
      width: 3.1rem;
      height: 0.7rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        width: 0.7rem;
        height: 0.7rem;
      }
      .describe {
        width: 2.22rem;
        height: 0.7rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        &-title {
          width: 100%;
          text-align: left;
          font-size: 0.27rem;
          font-weight: bold;
          color: #000000;
        }
        &-msg {
          width: 100%;
          text-align: left;
          font-size: 0.16rem;
          letter-spacing: 0em;
          color: #999999;
          white-space: nowrap;
        }
      }
    }
  }
  &-medium {
    width: 6.61rem;
    height: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666666;
    font-family: PingFang SC;
    font-size: 0.16rem;
    font-weight: 500;
    &-item {
      cursor: pointer;
    }
  }
  &-link {
    width: 3rem;
    height: 0.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-item {
      color: #000000;
      font-size: 0.16rem;
      font-weight: 500;
    }
    img {
      width: 0.66rem;
      height: 0.19rem;
    }
  }
  &-beian {
    width: 12.66rem;
    height: 0.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.16rem;
    color: #999999;
    div {
      height: 0.4rem;
      line-height: 0.4rem;
      img {
        width: 0.2rem;
      }
    }
  }
}
</style>
<style scoped lang="scss">
.newDialog {
  /deep/ .el-divider {
    margin: 0px;
  }
  /deep/ .el-dialog__header {
    padding: 0;
  }
  .textBox {
    font-size: 0.2rem;
    // height: 10vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    .tishi {
      display: flex;
      align-items: center;
      font-size: 0.16rem;
      .icon-weixin {
        color: rgb(67, 201, 62);
        margin-right: 0.1rem;
      }
    }
    .sgBpox {
      font-family: PingFang SC;
      font-size: 0.16rem;
      color: #999999;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 0.24rem;
      border-bottom: 0.01rem solid #e8e8e8;
      padding-bottom: 0.26rem;
      .newSg {
        padding: 0.12rem;
        border: 0.01rem solid #a7adb8;
        margin-right: 0.1rem;
        cursor: pointer;
        margin-bottom: 0.1rem;
      }
    }
    .ysBox {
      font-family: PingFang SC;
      margin-top: 0.15rem;
      font-size: 0.16rem;
      color: #999999;
      display: flex;
      align-items: center;
    }
    .isacitive {
      border: 0.01rem solid #ec6c15 !important;
      color: #ec6c15;
    }
    .newYs {
      font-size: 0.14rem;
      color: #000000;
      margin-left: 0.15rem;
      width: 1.5rem;
    }
    /deep/ .el-input-number .el-input__inner {
      height: auto !important;
    }
  }
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    .btnImg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
    /deep/ .el-button {
      padding: 10px 20px;
    }
  }
  .DiaLogHeader {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    .titlebOX {
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      text-align: center;
    }
    .chahao {
      width: 20px;
      height: 20px;
      background-image: url("@/static/Imgs/userImg/chahao.png");
      background-size: 100% 100%;
      text-align: center;
      line-height: 20px;
      // color: #e65f00;
      cursor: pointer;
    }
  }
  .Markers {
    display: flex;
    align-items: center;
    .newQizi {
      width: 18px;
      height: 18px;
    }
    /deep/ .el-radio {
      display: flex;
      align-items: center;
      margin-left: 20px;
    }
  }
  /deep/ .huiBtn {
    background: #f5f7f9;
    border-color: #f5f7f9;
    color: #000;
  }
  /deep/ .hongBtn {
    background: #e22a1f;
    color: #fff;
    border-color: #e22a1f;
  }
}
/deep/ .el-dialog__body {
  padding: 0;
  padding-top: 10px;
  padding-bottom: 60px;
}
</style>
<style scoped lang="scss">
// @media screen and (max-width: 1300px) {
//   .bottom {
//   width: 100%;
//   height: 100%;
//   display: flex;
//   flex-direction: column;
//   justify-content: flex-start;
//   align-items: center;
//   &-top {
//     width: 13rem;
//     height: 1.5rem;
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
//     .item {
//       width: 2.1rem;
//       height: 0.7rem;
//       display: flex;
//       justify-content: space-between;
//       align-items: center;
//       img {
//         width: 0.7rem;
//         height: 0.7rem;
//       }
//       .describe {
//         width: 1.22rem;
//         height: 0.7rem;
//         display: flex;
//         flex-direction: column;
//         justify-content: space-around;
//         align-items: center;
//         &-title {
//           width: 100%;
//           text-align: left;
//           font-size: 0.2rem;
//           font-weight: bold;
//           color: #000000;
//         }
//         &-msg {
//           width: 100%;
//           text-align: left;
//           font-size: 0.12rem;
//           letter-spacing: 0em;
//           color: #999999;
//           white-space: nowrap;
//         }
//       }
//     }
//   }
//   &-medium {
//     width: 8.61rem;
//     height: 0.8rem;
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
//     color: #666666;
//     font-family: PingFang SC;
//     font-size: 0.14rem;
//     font-weight: 500;
//     &-item {
//       cursor: pointer;
//     }
//   }
//   &-link {
//     width: 4.5rem;
//     height: 0.4rem;
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
//     &-item {
//       color: #000000;
//       font-size: 0.12rem;
//       font-weight: 500;
//     }
//     img {
//       width: 0.66rem;
//       height: 0.19rem;
//     }
//   }
//   &-beian {
//     width: 12.66rem;
//     height: 0.4rem;
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
//     font-size: 0.12rem;
//     color: #999999;
//     div {
//       height: 0.4rem;
//       line-height: 0.4rem;
//       img {
//         width: 0.2rem;
//       }
//     }
//   }
// }
// }
</style>
